<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Highslide JS</title>
		
		<script type="text/javascript" src="../../resources/highslide/highslide-with-gallery.js"></script>
		<link rel="stylesheet" type="text/css" href="../../resources/highslide/highslide.css" />
		<!--[if lt IE 7]>
		<link rel="stylesheet" type="text/css" href="../../resources/highslide/highslide-ie6.css" />
		<![endif]-->
		
		<script type="text/javascript">
			hs.graphicsDir = '../../resources/highslide/graphics/';
			hs.align = 'center';
			hs.transitions = ['expand', 'crossfade'];
			hs.fadeInOut = true;
			hs.outlineType = 'glossy-dark';
			hs.wrapperClassName = 'dark';
			hs.captionEval = 'this.a.title';
			hs.numberPosition = 'caption';
			hs.useBox = true;
			hs.width = 600;
			hs.height = 400;
			hs.showCredits = false;
			//hs.dimmingOpacity = 0.8;
			
			// Add the slideshow providing the controlbar and the thumbstrip
			hs.addSlideshow({
				//slideshowGroup: 'group1',
				interval: 5000,
				repeat: false,
				useControls: true,
				fixedControls: 'fit',
				overlayOptions: {
					position: 'bottom center',
					opacity: 0.75,
					hideOnMouseOut: true
				},
				thumbstrip: {
					position: 'above',
					mode: 'horizontal',
					relativeTo: 'expander'
				}
			});
			
			// Make all images animate to the one visible thumbnail
			var miniGalleryOptions1 = {
				thumbnailId: 'thumb1'
			}
		</script>
	</head>

	<body>
		<div class="highslide-gallery">
		
			<a class='highslide' id="thumb1" href='../../resources/images/highslide/thumbstrip11.jpg' title="Two cabins" 
					onclick="return hs.expand(this, miniGalleryOptions1)">
				<img src='../../resources/images/highslide/thumbstrip11.thumb.png' alt=''/>
			</a>
		
			<div class="hidden-container">
		
		        <a class='highslide' href='../../resources/images/highslide/thumbstrip12.jpg' title="Patterns in the snow"
						onclick="return hs.expand(this, miniGalleryOptions1)">
					<img src='../../resources/images/highslide/thumbstrip12.thumb.png' alt=''/></a>
		
				<a class='highslide' href='../../resources/images/highslide/thumbstrip13.jpg' title="Cabins"
						onclick="return hs.expand(this, miniGalleryOptions1)">
					<img src='../../resources/images/highslide/thumbstrip13.thumb.png' alt=''/></a>
		
				<a class='highslide' href='../../resources/images/highslide/thumbstrip14.jpg' title="Old stone cabins"
						onclick="return hs.expand(this, miniGalleryOptions1)">
					<img src='../../resources/images/highslide/thumbstrip14.thumb.png' alt=''/></a>
		
				<a class='highslide' href='../../resources/images/highslide/thumbstrip15.jpg' title="A litte open water"
						onclick="return hs.expand(this, miniGalleryOptions1)">
					<img src='../../resources/images/highslide/thumbstrip15.thumb.png' alt=''/></a>
		
				<a class='highslide' href='../../resources/images/highslide/thumbstrip16.jpg' title="Dipper"
						onclick="return hs.expand(this, miniGalleryOptions1)">
					<img src='../../resources/images/highslide/thumbstrip16.thumb.png' alt=''/></a>
		
				<a class='highslide' href='../../resources/images/highslide/thumbstrip17.jpg' title="Dipper"
						onclick="return hs.expand(this, miniGalleryOptions1)">
					<img src='../../resources/images/highslide/thumbstrip17.thumb.png' alt=''/></a>
		
				<a class='highslide' href='../../resources/images/highslide/thumbstrip18.jpg' title="Mountains"
						onclick="return hs.expand(this, miniGalleryOptions1)">
					<img src='../../resources/images/highslide/thumbstrip18.thumb.png' alt=''/></a>
		
				<a class='highslide' href='../../resources/images/highslide/thumbstrip19.jpg' title="Birch trees"
						onclick="return hs.expand(this, miniGalleryOptions1)">
					<img src='../../resources/images/highslide/thumbstrip19.thumb.png' alt=''/></a>
		
				<a class='highslide' href='../../resources/images/highslide/thumbstrip20.jpg' title="Highland woods"
						onclick="return hs.expand(this, miniGalleryOptions1)">
					<img src='../../resources/images/highslide/thumbstrip20.thumb.png' alt=''/></a>
		
				<a class='highslide' href='../../resources/images/highslide/thumbstrip21.jpg' title="Frozen lake"
						onclick="return hs.expand(this, miniGalleryOptions1)">
					<img src='../../resources/images/highslide/thumbstrip21.thumb.png' alt=''/></a>
		
				<a class='highslide' href='../../resources/images/highslide/thumbstrip22.jpg' title="Spring in the mountains"
						onclick="return hs.expand(this, miniGalleryOptions1)">
					<img src='../../resources/images/highslide/thumbstrip22.thumb.png' alt=''/></a>
		
				<a class='highslide' href='../../resources/images/highslide/thumbstrip23.jpg' title="Spring in the mountains"
						onclick="return hs.expand(this, miniGalleryOptions1)">
					<img src='../../resources/images/highslide/thumbstrip23.thumb.png' alt=''/></a>
		
				<a class='highslide' href='../../resources/images/highslide/thumbstrip24.jpg' title="Fjord landscape"
						onclick="return hs.expand(this, miniGalleryOptions1)">
					<img src='../../resources/images/highslide/thumbstrip24.thumb.png' alt=''/></a>
			</div>
		</div>
	</body>
</html>